<template>
  <div class="container">
    <el-card>
      <!-- 头部nav input -->
      <el-form type="flex" justify="justify" align="center" ref="form" :model="formData">
        <el-row type="table">
          <el-col :span="6">
            <el-form-item label="审批人">
              <el-input style="width:220px" placeholder="根据文章标题搜素" v-model="formData.approve"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态">
              <el-select placeholder="请选择" v-model="formData.stasus">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button size="small" @click="clearBtn">清除</el-button>
              <el-button type="primary" size="small">搜索</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="success" icon="el-icon-edit" @click="textBtn">新增技巧</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 警示框 -->
        <el-row>
          <el-alert class="el-icon-warning" type="info" close>
            <span slot="title">数据共{{ counts }}条</span>
          </el-alert>
        </el-row>
      </el-form>
      <!-- 表单 table -->
      <template>
        <el-table border-bottom :data="list" style="margin-top:20px">
          <el-table-column prop="date" label="序号" width="100" type="index"></el-table-column>
          <el-table-column prop="title" label="文章标题">
            <!-- 插槽 -->
            <template v-slot="{ row }">
              <!-- 字体图标 -->
              <span slot="title">{{row.title | html2Text}}</span>
              <i v-if="row.videoURL" class="el-icon-film" @click="palyBtn(row)"></i>
              <!-- 视频弹出框 -->
              <el-dialog :visible="showDialog" @close="showDialog=false">
                <video controls :src="url" width="100%" height="100%"></video>
              </el-dialog>
            </template>
          </el-table-column>
          <el-table-column prop="visits" label="阅读数" width="180"></el-table-column>
          <el-table-column prop="username" label="录入人" width="180"></el-table-column>
          <el-table-column prop="createTime" label="录入时间" width="200">
            <!-- 过滤 -->
            <template v-slot="{row}">
              {{
              row.createTime | parseTimeByString
              }}
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态" width="100" :formatter=" formatState"></el-table-column>
          <el-table-column prop="address" label="操作" width="180">
            <template slot-scope="{ row }">
              <el-button type="text" size="small">预览</el-button>
              <el-button type="text" size="small" @click="changeState">启用</el-button>
              <el-button type="text" size="small" :disabled="row.isDisabled" @click="alter(row)">修改</el-button>
              <el-button
                type="text"
                size="small"
                :disabled="row.isDisabled"
                @click="delTitle(row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="end" style="margin-top:20px">
          <pagetool></pagetool>
        </el-row>
      </template>
    </el-card>
    <!-- 富文本 -->
    <richtext :showText.sync="showText" :fatherData="getFatherData"></richtext>
    <!-- /富文本 -->
  </div>
</template>

<script>
import pagetool from '@/module-manage/components/page-tool' // 引入分页组件
import { list } from '@/api/hmmm/articles' // 调用文章接口
import baseApi from '@/api/base/baseApi' // 调用常量更新状态
import richtext from '@/module-hmmm/components/richtext' // 引入富文本组件
import { remove, update } from '../../api/hmmm/articles' //调用删除接口 调用删除接口

export default {
  components: {
    pagetool,
    richtext
  },
  data() {
    return {
      list: [], // 接收数据
      counts: 0, // 定义数据总量
      isDisabled: true, // 定义禁用按钮布尔值
      showDialog: false, // 弹框组件布尔值
      showText: false, //富文本布尔值
      //父亲传出的数据
      // fatherData : {
      // articleBody,
      // title,
      // videoURL
      // },
      url: '',
      page: {
        page: 1, // 当前页码
        size: 10,
        total: 0 // 总数
      },
      formData: {
        approve: '',
        stasus: ''
      },
      options: [
        {
          // value: '1',
          label: '启用'
        },
        {
          // value: '0',
          label: '禁用'
        }
      ]
    }
  },
  created() {
    this.getArtilces()
  },
  methods: {
    textBtn() {
      this.showText = true
    },
    // 渲染页面
    async getArtilces() {
      const res = await list()
      console.log(res)
      this.list = res.data.items // 数据每一项
      this.counts = res.data.counts // 数据总量
      this.roleList = res.data.items.state
    },
    // 根据常量更改状态
    formatState(row, column, cellValue, index) {
      // 要去找
      const obj = baseApi.status.find(item => item.id === cellValue.toString())
      return obj ? obj.value : '已禁用'
    },
    //表单框重置
    clearBtn() {
      this.formData = {
        approve: '',
        stasus: ''
      }
      this.$refs.form.resetFields()
    },
    //更改弹窗
    changeState() {
      this.isDisabled = !this.isDisabled
    },
    // 遇到的bug为什么会弹出三个表单 弹窗组件建议写在div后 因为他有结构了插在
    palyBtn(row) {
      this.showDialog = true
      this.url = row.videoURL
    },
    //删除 选中文章
    async delTitle(id) {
      try {
        await this.$confirm('确定删除该数据吗')
        await remove(id)
        this.getArtilces()
        this.$message('删除成功')
      } catch (error) {
        console.log(error)
      }
    },
    //修改 文章列表
    async alter(id) {
      this.showText = true
      const data = await update(id)
      console.log(data)
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  .video-preview {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    overflow: hidden;
    z-index: 9999;
  }
}
</style>
